<template>
    <div class="search-list">
        <div class="headers">
            <Header></Header>
            <ul>
                <li>综合</li>
                <li>销量</li>
                <li>新品</li>
                <li>价格</li>
            </ul>
        </div>
        <!-- 商品列表 -->
        <section>
            <ul>
                <li>
                    <img src="../../../public/images/s-1.webp" alt="">
                    <h4>港味牛仔外套2019春秋韩版无袖牛仔衣学生bf宽松工装马甲女</h4>
                    <div class="price">
                        <div>
                            <span>￥</span>
                            <p>59.9</p>
                        </div>
                        <div>387 <i class="iconfont icon-fangdajing"></i></div>
                    </div>
                </li>
                <li>
                    <img src="../../../public/images/s-2.webp" alt="">
                    <h4>港味牛仔外套2019春秋韩版无袖牛仔衣学生bf宽松工装马甲女</h4>
                    <div class="price">
                        <div>
                            <span>￥</span>
                            <p>59.9</p>
                        </div>
                        <div>387 <i class="iconfont icon-fangdajing"></i></div>
                    </div>
                </li>
                <li>
                    <img src="../../../public/images/s-3.webp" alt="">
                    <h4>港味牛仔外套2019春秋韩版无袖牛仔衣学生bf宽松工装马甲女</h4>
                    <div class="price">
                        <div>
                            <span>￥</span>
                            <p>59.9</p>
                        </div>
                        <div>387 <i class="iconfont icon-fangdajing"></i></div>
                    </div>
                </li>
                <li>
                    <img src="../../../public/images/s-4.webp" alt="">
                    <h4>港味牛仔外套2019春秋韩版无袖牛仔衣学生bf宽松工装马甲女</h4>
                    <div class="price">
                        <div>
                            <span>￥</span>
                            <p>59.9</p>
                        </div>
                        <div>387 <i class="iconfont icon-fangdajing"></i></div>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>

<script setup>
import Header from '../../components/Search/Header.vue';
</script>

<style scoped>
.search-list{
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.headers ul{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 1rem;
    padding: 0.2rem 0;
    font-size: 0.4rem;
    color: #666;
    border-bottom: 1px solid #ccc;
}
.headers ul li{
    display: flex;
    align-items: center;
}
section{
    flex: 1;
    overflow: hidden;
}
section ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
section ul li{
    width: 50%;
    padding: 0.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
section ul li img{
    width: 100%;
    
}
section ul li h4{
    font-size: 0.32rem;
    text-align: center;
    margin: 0.2rem 0;
}
section ul li .price{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
section ul li .price div{
    display: flex;
    align-items: center;
    font-size: 0.32rem;
}
section ul li .price div span{
    font-size: 0.32rem;
}
section ul li .price div p{
    font-size: 0.4rem;
    margin-left: 0.2rem;
}
</style>